<template>
  <div class="sentence">
    <div class="sentence-input-box" @click="isOpen = !isOpen">
      <Input
        @handleClick="handleSearchClick"
        iptValue="请输入关键字查询"
        btnValue="开始搜索"
      />
      <div class="sentence-submit">
        <!-- <Input
          @handleClick="add"
          :getValue="submitValue"
          iptValue="请输入添加的句子"
          :isButton="false"
        /> -->
        <Input iptValue="请输入添加的句子" @handleClick="handleAddClick" />
      </div>
    </div>
    <List :listData="textData" />
    <div :class="isOpen ? 'open' : 'openShow'"></div>
  </div>
</template>

<script lang='ts'>
import { setSentence, searchSentence } from "@/server/home";
import Input from "@/components/common/input.vue";
import List from "@/components/common/list.vue";

export default {
  data() {
    return {
      textData: [],
      isOpen: false,
    };
  },
  components: {
    Input,
    List,
  },
  methods: {
    handleAddClick(value: string) {
      if (!value) return;
      setSentence({ xuezhong: value }).then((response) => {
        const res = response.data;

        console.log(res);
      });
    },
    handleSearchClick(value: string) {
      searchSentence({ value }).then((response) => {
        const res = response;
        if (res.data.length === 0) {
          this.$message({
            title: "暂无相关句子，敬请期待",
            content: "请尝试其他关键字把",
          });
        }
        this.textData = res.data;
      });
    },
    open() {},
  },
  setup() {},
};
</script>

<style lang='scss' scoped>
.sentence {
  width: 100%;
  background: lightblue;
  &-input-box {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  &-submit {
    display: flex;
  }
  .open {
    margin-left: 0;
    margin-right: 0;
    margin: auto;
    width: 500px;
    height: 400px;
    background: yellow;
    border: 1px solid #5340a7;
    transition: all 0.8s;
    opacity: 1;
  }
  .openShow {
    margin-left: 0;
    margin-right: 0;
    margin: auto;
    width: 50px;
    height: 0;
    border: 0;
    opacity: 0;
    transition: all 0.8s;
  }
}
</style>